<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>注册</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.7 -->
  <link rel="stylesheet" th:href="@{/adminlte/bower_components/bootstrap/dist/css/bootstrap.min.css}">
  <!-- Font Awesome -->
  <link rel="stylesheet" th:href="@{/adminlte/bower_components/font-awesome/css/font-awesome.min.css}">
  <!-- Ionicons -->
  <link rel="stylesheet" th:href="@{/adminlte/bower_components/Ionicons/css/ionicons.min.css}">
  <!-- Theme style -->
  <link rel="stylesheet" th:href="@{/adminlte/dist/css/AdminLTE.min.css}">
  <!-- iCheck -->
  <link rel="stylesheet" th:href="@{/adminlte/plugins/iCheck/square/blue.css}">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

  <!-- Google Font -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
</head>
<body class="hold-transition register-page">
<div class="register-box">
  <div class="register-logo">
    <b>注册 </b>
  </div>

  <div class="register-box-body">
    <p class="login-box-msg">Register a new membership</p>

<!--    <form method="post">-->
      <div class="form-group has-feedback">
        <input type="text" class="form-control" placeholder="Name" id="uname">
        <span class="glyphicon glyphicon-user form-control-feedback"></span>
      </div>
      <div class="form-group has-feedback">
        <input type="email" class="form-control" placeholder="Email" id="uemail">
        <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
      </div>
      <div class="form-group has-feedback">
        <input type="password" class="form-control" placeholder="Password" id="upwd">
        <span class="glyphicon glyphicon-lock form-control-feedback"></span>
      </div>
      <div class="form-group has-feedback">
        <input type="password" class="form-control" placeholder="Retype password" id="upasswd">
        <span class="glyphicon glyphicon-log-in form-control-feedback"></span>
      </div>
      <div class="row">
        <div class="col-xs-8">
          <div class="checkbox icheck">
            <label>
              <input type="checkbox"> I agree to the join system!
            </label>
          </div>
        </div>
        <!-- /.col -->
        <div class="col-xs-4">
          <button id = "btnSub" class="btn btn-primary btn-block btn-flat">Register</button>
        </div>
        <div id = "show"></div>
        <!-- /.col -->
      </div>
<!--    </form>-->

    <a th:href="@{/user/login}" class="text-center">I already have a membership</a>
  </div>
  <!-- /.form-box -->
</div>
<!-- /.register-box -->

<!-- jQuery 3 -->
<script th:src="@{/adminlte/bower_components/jquery/dist/jquery.min.js}"></script>
<!-- Bootstrap 3.3.7 -->
<script th:src="@{/adminlte/bower_components/bootstrap/dist/js/bootstrap.min.js}"></script>
<!-- iCheck -->
<script th:src="@{/adminlte/plugins/iCheck/icheck.min.js}"></script>
<script>
  $(function () {
    $('input').iCheck({
      checkboxClass: 'icheckbox_square-blue',
      radioClass: 'iradio_square-blue',
      increaseArea: '20%' /* optional */
    });
  });
</script>
<script>
  (function ()
  {
    var btn = document.getElementById("btnSub");
    btn.onclick = function (ev) {
      var xmlhttp;
      var url = "/user/api/register";
      var data = "name=" + document.getElementById("uname").value + "&email=" + document.getElementById("uemail").value + "&password=" + document.getElementById("upwd").value + "&passwd=" + document.getElementById("upasswd").value;

      if (window.XMLHttpRequest) {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp = new XMLHttpRequest();
      } else {
        // IE6, IE5 浏览器执行代码
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
      if (xmlhttp != null) {
        xmlhttp.open("POST", url, true);
        xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");
        xmlhttp.onreadystatechange = function () {
          if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            var msg = xmlhttp.responseText;
            var jsonObj = JSON.parse(msg);
            document.getElementById("show").innerHTML = jsonObj["msg"];
            if (jsonObj["ok"])
            //   document.getElementById("show").innerHTML = jsonObj["msg"];
              window.location.href = "/user/login"
            // }
            // else
            //   document.getElementById("show").innerHTML = jsonObj["msg"];
          }
        }
        xmlhttp.send(data);
      }
    }
  })();
  /*$(document).ready(function () {
    $("#btnSub").click(function () {
      $.ajax({
        url:"/user/api/register",
        type:'post',
        data:{
          name:document.getElementById("uname").value,
          email:document.getElementById("uemail").value,
          password:document.getElementById("upwd").value,
          passwd:document.getElementById("upasswd").value
        },
        complete:function () {
          var xmlhttp;

          if (window.XMLHttpRequest) {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp = new XMLHttpRequest();
          } else {
            // IE6, IE5 浏览器执行代码
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
          }
          if (xmlhttp != null) {
            xmlhttp.onreadystatechange = function () {
              if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                var msg = xmlhttp.responseText;
                var jsonObj = JSON.parse(msg);
                document.getElementById("show").innerHTML = jsonObj["msg"];
                if (jsonObj["ok"])
                //   document.getElementById("show").innerHTML = jsonObj["msg"];
                  window.location.href = "/user/login"
                // }
                // else
                //   document.getElementById("show").innerHTML = jsonObj["msg"];
              }
            }
          }
        }
      });
    })
  })*/
</script>
</body>
</html>
